<template>
  <div class="bodyBox minwidth">
    <!-- <div v-for="item in homeList" :key="item.column_id"> -->
    <!-- 轮播图 -->
    <div class="swiperbox">
      <Swiper :swiperList="swiperList" v-if="isShowSwiper" />
    </div>
    <!-- 导航栏 -->
    <div class="maintab minwidth">
      <div class="maintab_center">
        <div class="text cursor">Home</div>
        <div
          class="text cursor"
          v-for="item in typesList.slice(0, 5)"
          :key="item.id"
          @click="
            $router.push({
              path: '/browse',
              query: { id: item.id },
            })
          "
        >
          {{ item.name }}
        </div>
        <div class="hideallBox" @mouseover="mouseOver" @mouseleave="mouseleave">
          <div class="all cursor">All <i class="el-icon-s-unfold"></i></div>
          <el-collapse-transition>
            <div class="hideall" v-show="isShowAll">
              <div
                class="alldiv cursor"
                v-for="item in typesList.slice(5, 50)"
                :key="item.id"
                @click="
                  $router.push({
                    path: '/browse',
                    query: { id: item.id },
                  })
                "
              >
                {{ item.name }}
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
    </div>
    <div v-for="item in homeList" :key="item.id">
      <!-- Editor's pick 红色背景 -->
      <div class="editor minwidth" v-if="item.column_type === 1">
        <div class="editor_center">
          <div>
            <!-- 标题 -->
            <BoxTitle
              :title="item.column_name"
              bgc="background-color: rgba(255, 255, 255, 0.1);"
              textcolor="color:#fff"
              replace="See Add"
              btntext="color:#fff"
              isShow="true"
            />
            <!-- 内容 -->
            <div class="contentBox">
              <div
                class="content"
                v-for="items in item.column_book.slice(0, 6)"
                :key="items.book_id"
                @click="
                  $router.push({
                    path: '/bookdetails',
                    query: { id: items.book_id },
                  })
                "
              >
                <div class="content_center cursor">
                  <div class="img">
                    <img :src="items.photo" alt="" />
                    <div>{{ items.book_name }}</div>
                  </div>
                  <div class="trap">
                    <div>Destiny</div>
                    <div>Trap</div>
                  </div>
                  <!-- <div class="addto addtoAdd cursor">
                    <i class="el-icon-star-off"></i> Add
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- New Book Express 2行6个-->
      <div class="express minwidth" v-if="item.column_type === 4">
        <div class="expressBox">
          <BoxTitle
            title="New Book Express"
            bgc="background:#FFE7DE"
            textcolor="color:#000"
            replace="replace"
            btntext="color:#FB6E3B"
          />
          <BookList :booklistArr="arr" />
        </div>
      </div>
      <!-- Leaderboard  黑色背景 -->
      <div class="minwidth LeaderboardBox" v-if="item.column_type === 0">
        <div class="fantasy">
          <BoxTitle
            :title="item.column_name"
            bgc="background-color: rgba(255, 255, 255, 0.2);"
            textcolor="color:#fff"
            replace="See AII"
            btntext="color:#ffffff"
            isShow="true"
            hos="true"
          />
          <!-- 浏览第一 -->
          <div
            class="numone cursor"
            @click="
              $router.push({
                path: '/bookdetails',
                query: { id: item.column_book[0].book_id },
              })
            "
          >
            <img :src="item.column_book[0].photo" alt="" />
            <div class="booktext">
              <div class="numone_top">
                <div class="itemcenter">
                  <div class="numone_top_left">
                    <div class="numone_top_text">
                      {{ item.column_book[0].book_name }}
                    </div>
                    <div class="author">
                      {{ item.column_book[0].type_name }}
                    </div>
                  </div>
                  <!-- <div class="addbtn">
                    <i class="el-icon-star-off"></i><i class="addI">Add</i>
                  </div> -->
                </div>
                <div class="introduce">
                  {{ item.column_book[0].summary }}
                </div>
              </div>
              <div class="numberG">
                <img src="../assets/homeimg/1.png" alt="" />
              </div>
            </div>
          </div>
          <!-- 前10排版 -->
          <div class="ranking cursor">
            <div
              class="ranking_center"
              v-for="(items, index) in item.column_book.slice(1, 9)"
              :key="items.id"
              @click="
                $router.push({
                  path: '/bookdetails',
                  query: { id: items.book_id },
                })
              "
            >
              <div class="imgpos">
                <img :src="items.photo" alt="" />
                <img
                  class="shadow"
                  src="../assets/homeimg/yinyin.png"
                  alt=""
                />
                <p>{{ index + 2 }}</p>
              </div>
              <div class="text">{{ items.book_name }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 综合  1行6个-->
      <div class="minwidth" v-if="item.column_type === 2">
        <div class="comprehensive">
          <!-- Fantasy·Fantasy -->
          <div class="fantasyBox">
            <BoxTitle
              :title="item.column_name"
              bgc="background:#FFE7DE"
              textcolor="color:#000"
              replace="See AII"
              btntext="color:#FB6E3B"
              isShow="true"
            />
            <BookList :booklistArr="item.column_book.slice(0, 6)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<router>
{
path: '/',
alias: [
'/home',
]
}
</router>

<script>
import Swiper from "../components/Swiper.vue";
import BoxTitle from "../components/Home/Title.vue";
import BookList from "../components/Home/BookList.vue";
import {HomesApi, TypesApi} from "@/requery/api";

export default {
  data() {
    return {
      swiperList: [], //轮播图数组
      isShowSwiper: false,
      homeList: [], //内容数组
      typesList: [], //分类数组
      isShowAll: false,
    };
  },
  methods: {
    mouseOver() {
      this.isShowAll = true;
    },
    mouseleave() {
      this.isShowAll = false;
    },
  },
  async asyncData(){
    let typesList = []

    var res = await TypesApi({
      size: 50,
      page: 1,
    })
    if (res.code === 200)
      typesList = res.data

    let swiperList = []
    let homeList = []
    let isShowSwiper = false
    res = await HomesApi({
      navbar_id: 1,
      os_type: 1,
    })
    if (res.code === 200) {
      swiperList = res.data[0];
      homeList = res.data;
      isShowSwiper = true;
    }


    // var res = await ConfigsApi()

    return {
      typesList,

      swiperList,
      homeList,
      isShowSwiper
    }
  },
  // created() {
  //   // 分类请求
  //   TypesApi({
  //     size: 50,
  //     page: 1,
  //   }).then((res) => {
  //     this.typesList = res.data;
  //     console.log(res, "tays");
  //   });
  //   // 首页请求
  //   HomesApi({
  //     navbar_id: 1,
  //     os_type: 1,
  //   }).then((res) => {
  //     this.swiperList = res.data[0];
  //     this.homeList = res.data;
  //     this.isShowSwiper = true;
  //     console.log(this.homeList, "homeList");
  //   });
  //   // 我的配置
  //   ConfigsApi().then((res) => {
  //     console.log(res, "res");
  //   });
  // },
  components: {
    Swiper,
    BoxTitle,
    BookList,
  },
};
</script>

<style lang = "less" scoped>
.swiperbox {
  height: 380px;
}
.hideallBox {
  font-size: 16px;
  position: relative;
  .hideall {
    background: linear-gradient(90deg, #222222 0%, #222222 49%, #222222 100%);
    padding: 10px;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 3;
    .alldiv {
      margin-bottom: 8px;
    }
  }
}
.bodyBox {
  .maintab {
    height: 60px;
    background: linear-gradient(90deg, #222222 0%, #222222 49%, #222222 100%);
    .maintab_center {
      width: 1160px;
      height: 60px;
      margin: 0 auto;
      /* background-color: #fff; */
      font-size: 18px;
      line-height: 25px;
      color: #ffffff;
      display: flex;
      align-items: center;
      .text {
        margin-right: 60px;
      }
      .all {
        float: right;
      }
    }
  }
  .editor {
    height: 550px;
    background: url("../assets/homeimg/组 7763 (1).png") center center
      no-repeat;
    background-size: 100% 100%;
    .editor_center {
      width: 1160px;
      height: 550px;
      margin: 0 auto;
      padding-top: 55px;
      box-sizing: border-box;
      display: flex;
      /* background-color: #909; */
      .contentBox {
        width: 1160px;
        display: flex;
        justify-content: space-between;
        .content {
          width: 175px;
          .content_center {
            .img {
              width: 175px;
              height: 235px;
              /* background-color: #909; */
              position: relative;
              img {
                width: 175px;
                height: 235px;
                position: absolute;
              }
              div {
                width: 175px;
                height: 22px;
                line-height: 16px;
                padding: 0 8px;
                font-size: 13px;
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #ffffff;
                position: absolute;
                left: 0;
                bottom: 0;
              }
            }
            .trap {
              height: 33px;
              background: #201a16;
              display: flex;
              div {
                margin-left: 30px;
                line-height: 33px;
                font-size: 14px;
                color: #e6a961;
              }
            }
            .addto {
              width: 127px;
              height: 43px;
              border-radius: 25px;
              line-height: 43px;
              text-align: center;
              font-size: 15px;
              font-family: San Francisco Display,serif;
              margin: 38px auto 0;
              color: #ffffff;
              position: relative;
              .el-icon-star-off {
                position: absolute;
                left: 14px;
                top: 14.5px;
              }
            }
            .addtoAdded {
              background: rgba(0, 0, 0, 0.5);
            }
            .addtoAdd {
              background: #f99b2e;
            }
          }
        }
      }
    }
  }
  .express {
    .expressBox {
      width: 1200px;
      padding-bottom: 40px;
      /* background-color: #909; */
      margin: 0 auto;
      padding-top: 65px;
      box-sizing: border-box;
    }
  }
  .LeaderboardBox {
    background: url("../assets/homeimg/组 7123.png") center center no-repeat;
    background-size: 100% 100%;
    .fantasy {
      width: 1160px;
      height: 700px;
      /* background-color: #909; */
      margin: 0 auto;
      padding-top: 45px;
      box-sizing: border-box;
      .numone {
        width: 1160px;
        height: 209px;
        background: rgba(82, 80, 78, 1);
        display: flex;
        img {
          width: 156px;
          height: 209px;
        }
        .booktext {
          width: 1030px;
          height: 209px;
          padding: 30px 48px;
          box-sizing: border-box;
          /* background-color: #909; */
          display: flex;
          justify-content: space-between;
          .numone_top {
            width: 698px;
            height: 100%;
            .itemcenter {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .numone_top_left {
                font-weight: 500;
                color: #ffffff;
                opacity: 0.8;
                .numone_top_text {
                  font-size: 20px;
                }
                .author {
                  font-size: 14px;
                  margin: 16px 0 19px;
                }
              }
              .addbtn {
                width: 120px;
                height: 41px;
                border: 1px solid #f99b2e;
                border-radius: 25px;
                text-align: center;
                line-height: 41px;
                color: #f99b2e;
                .addI {
                  margin-left: 20px;
                }
              }
            }
            .introduce {
              font-size: 13px;
              line-height: 21px;
              color: #ffffff;
              opacity: 0.8;
            }
          }
          .numberG {
            height: 161px;
            width: 120px;
            padding-left: 50px;
            box-sizing: border-box;
            img {
              width: 59px;
              height: 134px;
            }
          }
        }
      }
      .ranking {
        width: 1160px;
        display: flex;
        justify-content: space-between;
        margin-top: 45px;
        .ranking_center {
          width: 132px;
          .imgpos {
            position: relative;
            height: 177px;
            p {
              position: absolute;
              z-index: 99;
              right: 0;
              top: -20px;
              font-size: 50px;
              font-weight: 600;
              color: rgba(249, 155, 46, 1);
              font-family: DIN,serif;
            }
          }
          .shadow {
            position: absolute;
            z-index: 2;
          }
          img {
            width: 132px;
            height: 177px;
            position: absolute;
          }
          .text {
            font-size: 12px;
            font-weight: 500;
            color: #ffffff;
            margin-top: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .comprehensive {
    width: 1160px;
    margin: 0 auto;
    padding-top: 30px;
    box-sizing: border-box;
    .fantasyBox {
      margin-bottom: 50px;
    }
  }
}
.minwidth {
  width: 100vw;
  min-width: 1160px;
}
</style>
